<template>
    <div id="prizeCenter" class="clearfix">
      <div class="vote-title">首页 > 活动列表 > 投票记录列表</div>
      <div class="vote-btn clearfix">
        <div class="btn" @click="exportExcel">导出excel</div>
        <div class="btn" @click="backPrevPage">返回活动列表</div>
      </div>
      <!-- 数据筛选条件选择 -->
      <el-row :gutter="20">
          <el-col :span="4">
              <el-input v-model="searchParam.title" placeholder="候选人"></el-input>
          </el-col>
          <el-col :span="4">
              <el-input v-model="searchParam.device" placeholder="投票设备"></el-input>
          </el-col>
          <el-col :span="6">
              <el-date-picker
                  size="small"
                  v-model="dateScope"
                  type="daterange"
                  align="right"
                  placeholder="选择日期范围"
                  :picker-options="pickerOptions">
              </el-date-picker>
          </el-col>
          <el-col :span="1">
            <el-button @click="fetchList" type="primary" icon="search">搜索</el-button>
          </el-col>
      </el-row>
        <!-- 中奖数据 -->
        <div class="table-div"  v-loading="loadingChoose">
             <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="username"
                    label="投票人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="voted_at"
                    label="投票时间"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="投票对象"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="device_id"
                    label="投票设备"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="投票IP"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="location"
                    label="投票人所在地区"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class='pagination'>
            <!-- 
                size-change	pageSize 改变时会触发
                current-change	currentPage 改变时会触发

                page-size	每页显示条目个数
                total	总条目数
                current-page	当前页数，
                layout	组件布局，子组件名用逗号分隔
             -->
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="searchParam.limit"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import * as api from "./../api/api";
export default {
  data() {
    return {
      //查询条件
      searchParam: {
        activity_id: '',
        order: '',
        limit: 10,
        offset: '',
        title: '',
        device: '',
        begin_time: '',
        end_time: ''
      },
      loadingChoose:false,    //加载中      
      activityList: [],       //活动列表
      activityId:'',//选中的活动id
      //日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "过去7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "过去30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateScope: '',//选中的时间范围
      phoneNumber:'',//电话号码
      prizeStateList:[{
          value:'全部',
          lable:'全部'
      },{
          value:'未兑奖',
          lable:'未兑奖'
      },{
          value:'已兑奖',
          lable:'已兑奖'
      },{
          value:'提交中',
          lable:'提交中'
      },{
          value:'兑奖失败',
          lable:'兑奖失败'
      }],
      screen:'',//批量筛选
      allPrize:[{ text: '家', value: '家' }, { text: '公司', value: '公司' }],//所有奖品
      allType:[],//所有类型
      allState:[],//所有状态
      allData:[],//所有中奖数据
      newData:[],//筛选过后的数据
      tableData: [],//显示的中奖数据
      pageSize:15,//每页显示条数
      total: 0,//总条数
      currentPage: 1,//默认页码
      dialogVisible: false, //显示/隐藏下载提示框
      dialogVisibleInfo: false,//显示/隐藏查看信息提示框
      gridData: [],//查看信息提示框数据
      editId:'',//当前中奖信息的id
      editStatus:'',//当前中奖信息的状态
    };
  },
  mounted() {
      this.fetchList();
  },
  watch: {
    dateScope(val){
      if (!val[0] || !val[1]) {
        this.searchParam.begin_time = '';
        this.searchParam.end_time = '';
        return;
      }
      var start = val[0];
      var end = val[1];
      start = this.formatDate(start);
      end = this.formatDate(end);
      this.searchParam.begin_time = start;
      this.searchParam.end_time = end;
    }
  },
  computed: {},
  methods: {
      //获取中奖列表
      fetchList() {
        let vm = this;
        vm.loadingChoose=true;
        api.voteRecordList(vm.searchParam).then(res => {
          if (res.data.code != 0) return;
          vm.pagination(res.data);
          vm.loadingChoose=false;
        }).catch(err=>{
          console.log(err);
        })
      },
      formatDate(val){
          var date = new Date(val);
          var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
          var day = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
          return date.getFullYear()  + "-" + month + '-' + day;
      },
      //分页效果
      pagination(data){
          this.total = data.total;
          this.tableData = data.rows;
      },
      //当前页改变
      handleCurrentChange(val) {
        var that = this;
        that.searchParam.offset = that.searchParam.limit*(val-1);
        that.fetchList();
      },
      backPrevPage(){
        this.$router.go(-1);
      },
      //导出excel
      exportExcel(){
        var vm = this;
        window.location.href = 'http://hongbao.testmorefun.chinamcloud.com/web-api/votes/export-record/?begin_time='+vm.searchParam.begin_time+'&device='+vm.searchParam.device+'&title='+vm.searchParam.title+'&end_time='+vm.searchParam.end_time+'&activity_id='+vm.searchParam.activity_id;
      }
  },
  beforeRouteEnter:function(to,from,next) {    //路由生命周期
    next(vm => {
      if(vm.$route.query.activityId){
        vm.searchParam.activity_id = vm.$route.query.activityId;
      }else{
        vm.$router.go(-1);
      }
    })
  }
};
</script>

<style lang="less">
@import "../style/common";
#prizeCenter {
  min-width: 960px;
  height: 100%;
//   overflow-x: hidden;
  padding: 40px;
  .lh34 {
    line-height: 34px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .c888 {
    color: #888;
  }
  .fs12 {
    font-size: 12px;
  }
  .el-select {
    width: 128px;
    height: 34px;
  }
  .el-input--small .el-input__inner {
    height: 34px;
  }
  .el-button{
      height: 34px;
  }
  .el-table{
      margin-top: 20px;
  }
  .el-button-inventory{
      height: 34px;
      width: 70%
  }
  .el-table__row{
      padding:10px 0;
  }
  .pagination{
      width: 50%;
      margin: 20px auto;
      text-align: center;
  }
  .el-button-downloadTable{
      width: 90px;
      height: 30px;
      margin-top: 4px;
      border-radius: 24px;
  }
  .prizeName{
      font-size: 12px;
      color: #888;
      text-align: left;
      padding-top: 4px;
      .nickname{
          line-height: 30px;
          vertical-align: 10px;
          margin-left: 8px;
      }
  }
  .avatarImg{
      width: 30px;
      height: 30px;
  }
  .vote-title{
    color: #666666;
    font-size: 14px;
    position: relative;
    top:-18px;
  }
  .vote-btn{
    height: 56px;
    .btn{
      float: left;
      margin-right: 20px;
      width: 100px;
      padding: 0;
      border-radius: 5px;
      background-color: #11bfe3;
      color: #fff;
      font-size: 12px;
      border: 0;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      font-weight: 400;
      text-align: center;
      margin-top: 5px;
    }
  }
}
</style>
